import React from 'react'
import ReactTypes from 'prop-types'
//#region 
/**
 * ************* 使用props属性传递数据 **********
*/
// // 最外层的父组件
// export default class Com1 extends React.Component{
//     constructor(){
//         super()
//         this.state = {
//             color:'red'
//         }
//     }
//     render(){
//         return <div>
//             <h1>父组件</h1>
//             <Com2 color={this.state.color}></Com2>
//         </div>
//     }
// }

// //中间的子组件
// class Com2 extends React.Component{
//     constructor(){
//         super()
//     }
//     render(){
//         return <div>
//             <h3>子组件</h3>
//             <Com3 color={this.props.color}></Com3>
//         </div>
//     }
// }

// // 内部的孙子组件
// class Com3 extends React.Component{
//     constructor(){
//         super()
//     }
//     render(){
//         return <div>
//             <h5 style={{color:this.props.color}}>孙子组件</h5>
//         </div>
//     }
// }
//#endregion






/**
 * ********** 使用context共享数据 **********
 * 
*/

// 最外层的父组件
export default class Com1 extends React.Component{
    constructor(){
        super()
        this.state = {
            color:'red'
        }
    }


    /**
     * 1.在父组件中定义一个function,这个函数有个固定的名为getChildContext,内部必须返回一个对象,这个对象用来共享给所有子对象
    */
    getChildContext(){
        return {
            color:this.state.color
        }
    }

    /**
     * 2.使用属性校验，规定传递给子组件的数据类型，需要定义一个静态的（static）固定名称为childContextTypes对象
    */
    static childContextTypes = {
        color:ReactTypes.string
    } 

    render(){
        return <div>
            <h1>父组件</h1>
            <Com2></Com2>
        </div>
    }
}

//中间的子组件
class Com2 extends React.Component{
    constructor(){
        super()
    }
    render(){
        return <div>
            <h3>子组件</h3>
            <Com3></Com3>
        </div>
    }
}

// 内部的孙子组件
class Com3 extends React.Component{

    /**
     * 3.子组件要想使用父组件或者根组件共享的数据，必须要先在子组件中做数据类型校验
    */
    static contextTypes = {
        color:ReactTypes.string
    }
    render(){
        return <div>
            <h5 style={{color:this.context.color}}>孙子组件</h5>
        </div>
    }
}